<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            display: flex;
        }

        li {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div>
        <h3>中奖号码</h3>
        <ul id="ul"></ul>
    </div>
    <div>
        <h3>玩家号码</h3>
        <ul id="ul_2"></ul>
    </div>
    <div>
        <h3>结果</h3>
        <ul id="ul_3"></ul>
    </div>
    <input type="button" value="刷新" id="srce">


    <script src="../random_number.js"></script>
    <script>
        class Ball {
            constructor(number, bkColor, ele) {
                this.numebr = number;
                this.bkColor = bkColor;
                this.ele = ele;

            }
            render() {
                let li = document.createElement('li');
                li.innerText = this.numebr;
                li.style.backgroundColor = this.bkColor;
                this.ele.appendChild(li);

            }
        }

        //球函数
        function render_ball(ele) {
            //红球
            let s = new Set();
            while (s.size < 6) {
                s.add(random(1, 33));
            }
            let redballs = [...s].sort((a, b) => a - b);
            redballs.forEach(item => {
                let obj = new Ball(item, 'red', ele);
                obj.render()
            })
            //篮球
            let number = random(1, 16);
            let obj = new Ball(number, 'skyblue', ele);
            obj.render();
            return [redballs, number]
        }

        srce.onclick = function () { 
            // render_2();
            // render_ball();

            ul.innerHTML = '';
            ul_2.innerHTML = '';
            render_2();
        }
       
        function render_2() {
            let [computer_redballs, computer_number] = render_ball(ul);
            let [lucey_redballs, lucey_number] = render_ball(ul_2);



            let result = lucey_redballs.filter(item => computer_redballs.indexOf(item) != -1).length;
            console.log(result);
            if (result == 6 && lucey_number == computer_number) {
                ul_3.innerText = '钱(ni)太(zhong)多(bu)了，也封顶¥500万?';
            } else if (result == 6) {
                ul_3.innerText = '封顶¥500万';
            } else if (result == 5 && lucey_number == computer_number) {
                ul_3.innerText = '¥3000';
            } else if (result == 5 || (result == 4 && lucey_number == computer_number)) {
                ul_3.innerText = '¥200';
            } else if (result == 4 || (result == 3 && lucey_number == computer_number)) {
                ul_3.innerText = '¥10';
            } else if ((result == 2 && lucey_number == computer_number) || (result == 1 && lucey_number ==
                    computer_number) || lucey_number == computer_number) {
                ul_3.innerText = '¥5';
            } else {
                ul_3.innerText = '啥也不是';
            }

        }
    </script>
</body>

</html>